<template>
  <tr @click="handlerClick" :style="{ ...customTrStyle }">
    <slot />
  </tr>
</template>
<script>
export default {
  name: 'Row',

  inject: ['handlerClickRow'],

  props: {
    row: {
      type: Object,
      default: () => {}
    },

    id: {
      type: String | Number
    },

    index: {
      type: Number,
      default: 0
    },

    rowStyle: {
      type: Function
    },

    isBottomScroll: {
      type: Boolean,
      default: false
    },

    currentSelectId: {
      type: String | Number
    }
  },

  computed: {
    customTrStyle() {
      if (this.rowStyle) {
        return {
          backgroundColor: this.currentSelectId == this.id ? '#f5f7fa' : '#fff',
          borderTop: this.currentSelectId == this.id ? '1px solid blue' : '',
          borderBottom: this.currentSelectId == this.id ? '1px solid blue' : '',

          ...this.rowStyle(this.index, this.row)
        }
      } else {
        return {
          backgroundColor: this.currentSelectId == this.id ? '#f5f7fa' : '#fff',
          borderTop: this.currentSelectId == this.id ? '1px solid blue' : '',
          borderBottom: this.currentSelectId == this.id ? '1px solid blue' : ''
        }
      }
    }
  },

  methods: {
    handlerClick() {
      this.handlerClickRow(this.id, this.row, this.index)
    }

    // isSelectStyle() {
    //   return {
    //     backgroundColor: this.currentSelectId == this.id ? '#f5f7fa' : '#fff',
    //   }
    // },
  }
}
</script>
